<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <title> 商品列表 </title>
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    <link href="http://www.builive.com/apps/default/assets/css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/global.css" rel="stylesheet">
</head>
<body>
    <div class="ws-goodlist">
        <div id="tab" class="tab">
            <ul>
              <li class="bui-tab-panel-item active"><a href="#">全部</a></li>
              <li class="bui-tab-panel-item"><a href="#">已下架商品</a></li>
              <li class="bui-tab-panel-item"><a href="#">缺货商品</a></li>
              <li class="bui-tab-panel-item"><a href="#">库存报警</a></li>
            </ul>
          </div>
          <div class="ws-goodlist-controls">
              <span class="ws-goodlistbtn">添加商品</span>
              <div class="ws-goodlistbtn ext-xiala" data-role="dropdown">
                  <i>批量操作</i><span></span>
                  <ul class="ws-goodlistbtn-list">
                      <li class="ws-goodlistbtn-item">1</li>
                      <li class="ws-goodlistbtn-item">1</li>
                      <li class="ws-goodlistbtn-item">1</li>
                  </ul>
              </div>
              <div class="ws-goodlistbtn ext-xiala" data-role="dropdown">
                  <i>标签</i><span></span>
                  <ul class="ws-goodlistbtn-list">
                      <li class="ws-goodlistbtn-item">1</li>
                      <li class="ws-goodlistbtn-item">1</li>
                      <li class="ws-goodlistbtn-item">1</li>
                  </ul>
              </div>
              <span class="ws-goodlistbtn">删除</span>
              <span class="ws-goodlistbtn">导出</span>
              <span class="ws-goodlistbtn">导入</span>
              <div class="senior-search">
                  高级搜索>>
              </div>
              <div class="ws-goodlist-serch">
                  <div class="ws-goodlistbtn ext-xiala" data-role="dropdown">
                      <i>订单号</i><span></span>
                      <ul class="ws-goodlistbtn-list">
                          <li class="ws-goodlistbtn-item">订单号</li>
                          <li class="ws-goodlistbtn-item">收货人</li>
                          <li class="ws-goodlistbtn-item">收货地址</li>
                      </ul>
                  </div>
                  <input class="search-input" type="text" name="name" value="" placeholder="数额乳后直接回车确认">
                  <div class="search-ico"></div>
              </div>
          </div>
        <div class="row">
            <ul id="panel">
                <li>
                    <div class="ws-goodlistsubmain">
                        <div class="ws-goodlistsublist">
                            <div class="subleft">
                                <p>
                                    <span class="subleft-name">213</span>
                                    <span class="subleft-num">G574AF728E83F9</span>
                                    <span class="subleft-state ext-sale">上架销售中</span>
                                    <span>共0次评论, 共0次咨询</span>
                                </p>
                                <p>
                                    共被浏览<span class="subleft-n">10</span>次,被购买<span class="subleft-n">10</span>件。 近一周被浏览<span class="subleft-n">10</span>次，被购买<span class="subleft-n">10</span>件
                                </p>
                                <p>
                                    前台访问地址：
                                    <input type="text" name="name" value="">
                                    <span class="ws-goodlistbtn" style="float:none;">访问此链接</span>
                                </p>
                            </div>
                            <div class="subright">
                                <p>
                                    二维码
                                </p>
                                <div class="subright-img">
                                    <img src="http://new.chijiayd.com/public/images/91/93/7c/029d54517a5c9f21e5831de4736e7208b8ea6a2c.png" alt="" />
                                </div>
                                <a href="#">下载</a>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                </li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        <div class="senior-wrap">
            <div class="senior-header">
                <span>高级筛选(搜索)</span>
                <select class="" name="">
                    <option value="option">1</option>
                    <option value="option">1</option>
                    <option value="option">1</option>
                </select>
                <i></i>
            </div>
            <div class="senior-body">
                <div class="senior-body__row">
                    <span>商品编号是：</span>
                    <input type="text" value="">
                </div>
                <div class="senior-body__row">
                    <span>商品名称是：</span>
                    <input type="text" value="">
                </div>
                <div class="senior-body__row">
                    <span>售价大于</span>
                    <select class="" name="">
                        <option value="option">1</option>
                        <option value="option">1</option>
                        <option value="option">1</option>
                    </select>:
                    <input type="text" value="">
                </div>
                <div class="senior-body__row">
                    <span>上架：</span>
                    <input type="radio" name="seniorUp">是
                    <input type="radio" name="seniorUp">否
                </div>
                <div class="senior-body__row">
                    <span>库存大于</span>
                    <select class="" name="">
                        <option value="option">1</option>
                        <option value="option">1</option>
                        <option value="option">1</option>
                    </select>:
                    <input type="text" value="">
                </div>
                <div class="senior-body__row">
                    <span class="senior-body__chooose">立即筛选</span>
                    <span class="senior-body__clear">清除条件</span>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/bui-min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/config-min.js"></script>
    <script type="text/javascript">
        BUI.use(['bui/tab','bui/mask'],function(Tab){

            var tab = new Tab.TabPanel({
              srcNode : '#tab',
              elCls : 'nav-tabs',
              itemStatusCls : {
                'selected' : 'active'
              },
              panelContainer : '#panel'//如果不指定容器的父元素，会自动生成
              //selectedEvent : 'mouseenter',//默认为click,可以更改事件

            });

            tab.render();
      });

      // 下拉选择
      $(document).on('click', '[data-role="dropdown"] li', function() {
          var _this = $(this);
          _this.closest('[data-role="dropdown"]').find('i').html(_this.html());
          _this.closest('.ws-goodlistbtn-list').hide();
      })
      $(document).on('mouseover', '[data-role="dropdown"]', function() {
          var _this = $(this);
          _this.find('.ws-goodlistbtn-list').show();
      })
      $(document).on('mouseout', '[data-role="dropdown"]', function() {
          var _this = $(this);
          _this.find('.ws-goodlistbtn-list').hide();
      })

      // 高级搜索
      $('.senior-search').on('click', function() {
          var top = $(this).position().top + $(this).height();
          var height = $(window).height() - top - 3;
          $('.senior-wrap').css({
              'top': top + 3+ 'px',
              'height': height + 'px',
              'right': 0
          })
          $('.senior-body').css('height', height - 56 +'px')
      })
      $('.senior-header i').on('click', function() {
          $('.senior-wrap').css({
              'right': -187+'px'
          })
      })
    </script>
</body>

</html>
